<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue3基础语法</title>
    <style>
        /* 添加一些基本样式 */
        #app {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        .component {
            border: 1px solid #ccc;
            padding: 20px;
            margin: 20px;
            display: inline-block;
        }
    </style>
</head>
<body>
<div id="app">
    <my-component></my-component>
</div>
</body>
<script src="../libs/vue.global.min.js"></script>
<script>
    const { createApp, defineComponent } = Vue;

    // 定义一个简单的组件
    const MyComponent = defineComponent({
        template: `
            <div class="component">
                <h2>{{ title }}</h2>
                <p>{{ message }}</p>
                <button @click="incrementCount">Click me</button>
                <p>Count: {{ count }}</p>
            </div>
        `,
        data() {
            return {
                title: "My Vue 3 Component",
                message: "Hello, Vue 3!",
                count: 0
            };
        },
        methods: {
            incrementCount() {
                this.count++;
            }
        }
    });

    const app = createApp({});

    // 注册组件
    app.component("my-component", MyComponent);

    // 挂载应用
    app.mount("#app");
</script>
</html>
